---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import HeroSection from '../../components/HeroSection.astro';

const posts = [
  {
    id: 'new-dashboard-features',
    title: '新的仪表盘功能发布',
    excerpt: "我们添加了强大的新分析工具，帮助您深入了解业务绩效。",
    date: '2025年5月15日',
    author: '张丽',
    authorRole: '产品经理',
    authorAvatar: 'https://randomuser.me/api/portraits/women/32.jpg',
    category: '产品更新',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
  },
  {
    id: 'mobile-app-launch',
    title: '推出我们的移动应用',
    excerpt: '通过我们的新移动应用，随时随地访问您的工作空间，现已在iOS和Android设备上提供。',
    date: '2025年4月28日',
    author: '陈明',
    authorRole: '首席技术官',
    authorAvatar: 'https://randomuser.me/api/portraits/men/46.jpg',
    category: '新功能',
    image: 'https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
  },
  {
    id: 'api-improvements',
    title: 'API改进和新端点',
    excerpt: `我们扩展了API功能，增加了新的端点和改进的开发者文档。`,
    date: '2025年4月10日',
    author: '李娜',
    authorRole: '首席开发者',
    authorAvatar: 'https://randomuser.me/api/portraits/women/65.jpg',
    category: '开发者更新',
    image: 'https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
  },
  {
    id: 'team-collaboration-tools',
    title: '增强团队协作工具',
    excerpt: '使用我们新的实时编辑和评论功能，与您的团队更有效地协作。',
    date: '2025年3月22日',
    author: '王伟',
    authorRole: '产品设计师',
    authorAvatar: 'https://randomuser.me/api/portraits/men/22.jpg',
    category: '产品更新',
    image: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
  },
  {
    id: 'security-enhancements',
    title: '安全增强和合规性更新',
    excerpt: `我们加强了安全措施并添加了新的合规认证，确保您的数据安全。`,
    date: '2025年3月5日',
    author: '赵琳',
    authorRole: '安全官',
    authorAvatar: 'https://randomuser.me/api/portraits/women/45.jpg',
    category: '安全',
    image: 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
  },
  {
    id: 'integration-marketplace',
    title: '推出我们的集成市场',
    excerpt: '通过我们的新集成市场，连接您喜爱的工具和服务，该市场拥有超过50个合作伙伴。',
    date: '2025年2月18日',
    author: '刘强',
    authorRole: '合作伙伴经理',
    authorAvatar: 'https://randomuser.me/api/portraits/men/67.jpg',
    category: '集成',
    image: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'
  }
];

const categories = [...new Set(posts.map(post => post.category))];
---

<Layout title="最新消息 - OpenAuth.Net" description="OpenAuth.Net的最新产品更新、功能发布和公司新闻。">
  <Header />
  <main>
    <HeroSection 
      title="最新更新与新闻" 
      highlightText="更新"
      description="了解我们最新的产品更新、功能发布和公司新闻。"
    />
    
    <!-- 分类筛选 -->
    <div class="container-custom py-8">
      <div class="flex flex-wrap gap-4 justify-center mb-12">
        <a href="#" class="px-4 py-2 rounded-full bg-primary-600 text-white font-medium text-sm hover:bg-primary-700 transition-colors">
          所有文章
        </a>
        {categories.map((category) => (
          <a href={'#' + category.toLowerCase().replace(/\s+/g, '-')} class="px-4 py-2 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            {category}
          </a>
        ))}
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {posts.map((post, index) => (
          <div class="card border border-gray-200 dark:border-gray-700 overflow-hidden slide-up" style={'animation-delay: ' + (index * 100) + 'ms'}>
            <a href={'/blog/' + post.id} class="block">
              <img 
                src={post.image} 
                alt={post.title}
                class="w-full h-48 object-cover"
                loading="lazy"
              />
            </a>
            <div class="p-6">
              <div class="flex items-center mb-4">
                <span class="text-sm font-medium text-primary-600 dark:text-primary-400">{post.category}</span>
                <span class="mx-2 text-gray-300 dark:text-gray-600">•</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">{post.date}</span>
              </div>
              <a href={'/blog/' + post.id} class="block mb-3">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white hover:text-primary-600 dark:hover:text-primary-400 transition-colors">{post.title}</h2>
              </a>
              <p class="text-gray-600 dark:text-gray-300 mb-6">{post.excerpt}</p>
              <div class="flex items-center">
                <img 
                  src={post.authorAvatar} 
                  alt={post.author} 
                  class="w-10 h-10 rounded-full mr-3 object-cover"
                  loading="lazy"
                />
                <div>
                  <p class="font-medium text-gray-900 dark:text-white">{post.author}</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">{post.authorRole}</p>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div class="mt-12 flex justify-center">
        <a href="#" class="btn-outline">
          加载更多文章
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v10.586l3.293-3.293a1 1 0 011.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 14.586V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </main>
  <Footer />
</Layout>
